<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
	<head>
		<title>JalalJSCalendar :: Gregorian Example</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <link rel="stylesheet" type="text/css" media="all" href="../skins/aqua/theme.css" title="Aqua" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-blue.css" title="winter" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-blue2.css" title="blue" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-brown.css" title="summer" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-green.css" title="green" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-win2k-1.css" title="win2k-1" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-win2k-2.css" title="win2k-2" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-win2k-cold-1.css" title="win2k-cold-1" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-win2k-cold-2.css" title="win2k-cold-2" />
		<link rel="alternate stylesheet" type="text/css" media="all" href="../skins/calendar-system.css" title="system" />
	
		<!-- import the calendar script -->
		<script type="text/javascript" src="../calendar.js"></script>
		
		<!-- import the calendar script -->
		<script type="text/javascript" src="../calendar-setup.js"></script>
		
		<!-- import the language module -->
		<script type="text/javascript" src="../lang/calendar-en.js"></script>
		
<!-- helper script that uses the calendar -->
<script type="text/javascript">

var oldLink = null;
// code to change the active stylesheet
function setActiveStyleSheet(link, title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
  if (oldLink) oldLink.style.fontWeight = 'normal';
  oldLink = link;
  link.style.fontWeight = 'bold';
  return false;
}
		
</script>
<style type="text/css">
#flat_calendar_1, #flat_calendar_2{
	width: 200px;
}
.example {
	padding: 10px;
}

.display_area {
	background-color: #FFFF88
}
</style>		
		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->
	</head>
	<body>
		<div>
		Theme: 
		<a href="#" id="defaultTheme" onclick="return setActiveStyleSheet(this, 'Aqua');">Aqua</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'winter');">winter</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'blue');">blue</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'summer');">summer</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'green');">green</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-1');">win2k-1</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-2');">win2k-2</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-1');">win2k-cold-1</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-2');">win2k-cold-2</a>
		|
		<a href="#" onclick="return setActiveStyleSheet(this, 'system');">system</a>
		<br />
		<br />
		<script type="text/javascript">
		setActiveStyleSheet(document.getElementById("defaultTheme"), "Aqua");
		</script>
		</div>
		<div class="example">
			Date Input : 
			<input id="date_input_1" type="text" /><img id="date_btn_1" src="cal.png" style="vertical-align: top;" />
			<script type="text/javascript">
				Calendar.setup({
					inputField     :    "date_input_1",   // id of the input field
					button         :    "date_btn_1",   // trigger for the calendar (button ID)
		       		ifFormat       :    "%Y-%m-%d",       // format of the input field
		       		weekNumbers    : false
				});
			</script>
		</div>
		<div class="example">
			DateTime Input (24 hour) : 
			<input id="date_input_2" type="text" /><img id="date_btn_2" src="cal.png" style="vertical-align: top;" />
			<script type="text/javascript">
				Calendar.setup({
					inputField     :    "date_input_2",   // id of the input field
					button         :    "date_btn_2",   // trigger for the calendar (button ID)
		       		ifFormat       :    "%Y-%m-%d %H:%M",       // format of the input field
		       		showsTime      :    true,
        			timeFormat     :    "24",
					weekNumbers    : false
				});
			</script>
		</div>
		<div class="example">
			DateTime Input (12 hour): 
			<input id="date_input_3" type="text" /><img id="date_btn_3" src="cal.png" style="vertical-align: top;" />
			<script type="text/javascript">
				Calendar.setup({
					inputField     :    "date_input_3",   // id of the input field
					button         :    "date_btn_3",   // trigger for the calendar (button ID)
		       		ifFormat       :    "%Y-%m-%d %I:%M %P",       // format of the input field
		       		showsTime      :    true,
        			timeFormat     :    "12",
					weekNumbers    : false
				});
			</script>
		</div>
		<div class="example">
			Date Input with week number : 
			<input id="date_input_4" type="text" /><img id="date_btn_4" src="cal.png" style="vertical-align: top;" />
			<script type="text/javascript">
				Calendar.setup({
					inputField  : "date_input_4",   // id of the input field
					button      : "date_btn_4",   // trigger for the calendar (button ID)
		       		ifFormat    : "%Y/%m/%d",       // format of the input field
					weekNumbers : true
				});
			</script>
		</div>
		<div class="example">
			Date Input with visible days from other months : 
			<input id="date_input_10" type="text" /><img id="date_btn_10" src="cal.png" style="vertical-align: top;" />
			<script type="text/javascript">
				Calendar.setup({
					inputField  : "date_input_10",   // id of the input field
					button      : "date_btn_10",   // trigger for the calendar (button ID)
		       		ifFormat    : "%Y/%m/%d",       // format of the input field
        			showOthers	: true,
					weekNumbers : true
				});
			</script>
		</div>
		<div class="example">
			Date Input (hidden input) : 
			<span id="display_area_2" style="cursor: pointer;" class="display_area">Click Here</span>
			<form method="get" action="#">
			<input id="date_input_8" type="hidden" name="date" />
			</form>
			<script type="text/javascript">
				Calendar.setup({
					inputField     : "date_input_8",   // id of the input field
					displayArea    : "display_area_2",
		       		ifFormat       : "%Y-%m-%d",       // format of the input field
		       		weekNumbers    : false
				});
			</script>
		</div>
		<div class="example">
			Date Input with another date format : 
			<input id="date_input_5" type="text" size="25" /><img id="date_btn_5" src="cal.png" style="vertical-align: top;" />
			<script type="text/javascript">
				Calendar.setup({
					inputField  : "date_input_5",   // id of the input field
					button      : "date_btn_5",   // trigger for the calendar (button ID)
		       		ifFormat    : "%A, %e %B %Y",       // format of the input field
        			weekNumbers    : false
				});
			</script>
		</div>
		<div class="example">
			Date Input (multiple select) :<br />
			<a id="trigger" href="#">Open Calendar</a>
  			<div id="output"></div> 
			<script type="text/javascript">
// the default multiple dates selected, first time the calendar is instantiated
    var MA = [];

    function closed(cal) {

      // here we'll write the output; this is only for example.  You
      // will normally fill an input field or something with the dates.
      var el = document.getElementById("output");

      // reset initial content.
      el.innerHTML = "";

      // Reset the "MA", in case one triggers the calendar again.
      // CAREFUL!  You don't want to do "MA = [];".  We need to modify
      // the value of the current array, instead of creating a new one.
      // Calendar.setup is called only once! :-)  So be careful.
      MA.length = 0;

      // walk the calendar's multiple dates selection hash
      for (var i in cal.multiple) {
        var d = cal.multiple[i];
        // sometimes the date is not actually selected, that's why we need to check.
        if (d instanceof Date) {
          // OK, selected.  Fill an input field.  Or something.  Just for example,
          // we will display all selected dates in the element having the id "output".
          el.innerHTML += d.print("%A, %e %B %Y") + "<br />";

          // and push it in the "MA", in case one triggers the calendar again.
          MA[MA.length] = d;
        }
      }
      cal.hide();
      return true;
    };

    Calendar.setup({
      align      : "BR",
      showOthers : true,
      multiple   : MA, // pass the initial or computed array of multiple dates to be initially selected
      onClose    : closed,
      button     : "trigger"
    });			</script>
		</div>
		<div class="example"> 
			Flat Calendar (with hidden input) : <br />
			<span id="display_area_1" class="display_area">Select a date from calendar</span>
			<form method="get" action="#">
			<input id="date_input_7" type="hidden" name="date" />
			</form>
			<div id="flat_calendar_1"></div>
			<script type="text/javascript">
				Calendar.setup({
					inputField   : "date_input_7",
					displayArea  : "display_area_1",
					flat         : "flat_calendar_1",   // id of the input field
					ifFormat     : "%Y-%m-%d",       // format of the input field
        			weekNumbers  : false 
				});
			</script>
		</div>
		<div class="example"> 
			Flat Calendar (with callback) : <br />
			<div id="flat_calendar_2"></div>
			<script type="text/javascript">
				function dateChanged(calendar) {
					//do some thing with the selected date
					alert(calendar.date.print('Date Changed: %Y/%m/%d'));
				}
				Calendar.setup({
					flat         : "flat_calendar_2",   // id of the input field
        			flatCallback : dateChanged,
        			weekNumbers    : false 
				});
			</script>
		</div>
	</body>
</html>
